button {
  display: inline-block;
  outline: none;
  cursor: pointer;
}

.button {
  margin: 0;
  box-sizing: border-box;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 4px;
  border: 1px solid @color-border;
  background-color: @color-white;
  transition: all 300ms;

  &:hover {
    border-color: @color-primary;
    color: @color-primary;
  }

  &.primary {
    color: @color-white;
    background-color: @color-primary;
    border-color: @color-primary;

    &:hover {
      background-color: mix(@color-primary, @color-white, 86%);
      border-color: mix(@color-primary, @color-white, 86%);
    }
  }

  &.line {
    border-color: @color-primary;
  }
  
  &+.button {
    margin-left: 12px;
  }
}